<template>
  <xn-form-container
    :title="formData.ID ? '编辑产品类型' : '新增产品类型'"
    :width="550"
    :visible="visible"
    :destroy-on-close="true"
    @close="onClose"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
    >
      <a-form-item label="产品类型名称:" name="ProductTypeName">
        <a-input
          v-model:value="formData.ProductTypeName"
          placeholder="请输入产品类型名称"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="产品类型编号:" name="ProductTypeNo">
        <a-input
          v-model:value="formData.ProductTypeNo"
          placeholder="请输入产品类型编号"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="产品类型说明:" name="ProductTypeDesp">
        <a-input
          v-model:value="formData.ProductTypeDesp"
          placeholder="请输入产品类型说明"
          allow-clear
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button class="xn-mr8 mr10" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit">{{
        formData.ID ? "确认修改" : "确认新增"
      }}</a-button>
    </template>
  </xn-form-container>
</template>

<script setup>
import { required } from "@/utils/formRules";
import producttypemgrApi from "@/api/productManagement/producttypemgrApi";
import { message } from "ant-design-vue";

import XnFormContainer from "@/components/XnFormContainer/index.vue";
// 默认是关闭状态
const visible = ref(false);
const emit = defineEmits({ successful: null });
const formRef = ref();
const treeData = ref([]);
let iconSelector = ref();
// 表单数据
const formData = ref({});
// 打开抽屉
const onOpen = (record) => {
  visible.value = true;
  if (record) {
    formData.value = Object.assign({}, record);
  } else {
    formData.value = {};
  }
};
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

// 默认要校验的
const formRules = {
  ProductTypeName: [required("产品类型名称")],
  ProductTypeNo: [required("请输入产品类型编号")],
  ProductTypeDesp: [required("请输入产品类型说明")],
};

// 验证并提交数据
const onSubmit = () => {
  // 有id为编辑,无id为新增
  if (!formData.value.ID) {
    formRef.value
      .validate()
      .then(() => {
        producttypemgrApi
          .addProductType({
            PTName: formData.value.ProductTypeName,
            PTNo: formData.value.ProductTypeNo,
            PTDesp: formData.value.ProductTypeDesp,
          })
          .then(() => {
            onClose();
            emit("successful");
            message.success('新增成功')
          })
      })
      .catch(() => {});
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      producttypemgrApi
        .modifyProductType({
          PTName: formData.value.ProductTypeName,
          PTNo: formData.value.ProductTypeNo,
          PTDesp: formData.value.ProductTypeDesp,
          ID: formData.value.ID,
        })
        .then(() => {
          onClose();
          emit("successful");
          message.success('修改成功')
        });
    })
    .catch(() => {});
};

// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
  onOpen,
});
</script>
